<template>
    <div class="tree-wrapper">
        <el-tree class="scroll-tree" :data="widgetList" :props="props" @node-click="handleNodeClick" node-key="id"
            default-expand-all>
            <template #default="{ node, data }">
                <span class="tree-node">
                    <span class="tree-node-main">
                        <span>{{ data?.attributes?.label || data.label }} ({{ data.id }})</span>
                        <el-icon v-if="data.isContainer">
                            <Grid />
                        </el-icon>
                        <el-icon v-if="data.isFormItem">
                            <Edit />
                        </el-icon>
                        <el-icon v-if="data?.attributes?.hidden" @click.stop="showWidget(data)" class="eye-icon">
                            <Hide />
                        </el-icon>
                    </span>
                </span>
            </template>
        </el-tree>
    </div>
</template>

<script setup>
import { inject, ref } from 'vue'
import { Hide, Grid, Edit } from '@element-plus/icons-vue'

const designer = inject('designer')
const selectWidgetId = inject('selectWidgetId')
const widgetList = inject('widgetList')

const props = ref({
    children: 'children',
    label: 'label'
})

const handleNodeClick = (node) => {
    if (node.id && (node.isContainer || node.isFormItem)) {
        selectWidgetId.value = node.id
    }
}

const showWidget = (data) => {
    if (data?.attributes) {
        data.attributes.hidden = false
    }
}
</script>
<style scoped>
.tree-wrapper {
    overflow-x: auto;
    width: 100%;
    padding-top: 5px;
    background-color: var(--el-bg-color);
}

.scroll-tree {
    min-width: 320px;
    /* 可根据实际内容长度设定 */
}

.tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.tree-node-main {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.eye-icon {
    cursor: pointer;
}

.el-icon {
    color: var(--el-color-primary);
}
</style>